import React, {
  Component
} from 'react'
import {
  WingBlank,
  WhiteSpace,
  List,
  InputItem,
  Button
} from 'antd-mobile'
import {
  createForm
} from 'rc-form'
import styles from './index.scss'

const Item = List.Item;
const Brief = Item.Brief;

class Withdraw extends Component {
  state = {
    value: 1,
  }
  onSubmit = () => {
    this.props.form.validateFields({
      force: true
    }, (error) => {
      if (!error) {
        console.log(this.props.form.getFieldsValue());
      } else {
        alert('校验失败');
      }
    });
  }
  validateAccount = (rule, value, callback) => {
    if (value && value.length > 4) {
      callback();
    } else {
      callback(new Error('帐号至少4个字符'));
    }
  }
  render() {
    const {
      getFieldProps,
      getFieldError
    } = this.props.form;
    return (
      <WingBlank size="md">
    <WhiteSpace size="lg" />
      <List>
        <Item className={styles.withdraw}>可提现: <span>1631</span><i></i></Item>
      </List>
    <WhiteSpace size="lg" />
    <form>
      <List
        renderFooter={() => getFieldError('account') && getFieldError('account').join(',')}
      >
        <InputItem
          {...getFieldProps('account', {
            // initialValue: '小蚂蚁',
            rules: [
              { required: true, message: '请输入帐号' },
              { validator: this.validateAccount },
            ],
          })}
          clear
          error={!!getFieldError('account')}
          onErrorClick={() => {
            alert(getFieldError('account').join('、'));
          }}
          placeholder="如中国银行/支付宝"
        >收款银行</InputItem>
        <InputItem {...getFieldProps('accountName')} placeholder="开户支行/支付宝">
          开户支行
        </InputItem>
        <InputItem {...getFieldProps('accountNumber')} placeholder="银行账号/支付宝账号">
          卡号/账号
        </InputItem>
        <InputItem {...getFieldProps('userName')} placeholder="请填写收款账号的姓名">
          户主姓名
        </InputItem>
        <InputItem {...getFieldProps('userPhone')} placeholder="接受到账信息">
          手机号
        </InputItem>
      </List>
      <List>
       <InputItem {...getFieldProps('amount')} placeholder="50元以上">
          提现金额
        </InputItem>
      </List>
      <Button style={{width:"100%",marginTop:"2rem"}} type="primary" onClick={this.onSubmit} inline>提交</Button>
    </form>
  </WingBlank>
    )
  }
}

export default createForm()(Withdraw);